import React, { memo  } from 'react';
// import { useDispatch ,useSelector,shallowEqual} from 'react-redux';
// import { getTopBannerAction } from './store/actionCreators';
import {
    RecommendWrapper,
    Content,
    RecommendLeft,
    RecommendRight
} from './style';

import YTopBanner from './c-cpns/top-banner';
import YHotRecommend from './c-cpns/hot-recommend';
import YNewAlbum from './c-cpns/new-album';
import YRecomendRanking from './c-cpns/recommend-ranking';

import YUserLogin from './c-cpns/user-login';
import YSettleSinger from './c-cpns/settle-singer';
import YHotAnchor from './c-cpns/hot-anchor';

function YRecommend(props) {
    // // 组件 和redux 关联 就是要做两件事 1 获取数据 2 进行操作

    // // useDispatch useSelector是redux提供的Hook
    //     // :2: 也就是说 redux 用useSelector 这个Hook 把
    //     // shallowEqual 是把组件进行浅层的比较
    //     const {topBanners} = useSelector(state => ({
    //         // 这里的state 就是组件里的state
    //         //  这里会有个返回值 这个返回值 会返回给 recommend里面
    //         // 也就是说 这里返回的一个对象 会给recommmend
    //         // topBanners:state.recommend.topBanners
    //         // 最后的数据结构优化里 因为引入了 immutable对象 取 redux里的数据 就不能直接用 state.recommend.topBanners 这种方式去取值了
    //         //  要用get 方法
    //         topBanners:state.recommend.get('topBanners')
    //         // 这里可以是多个数据 上面用的是对象的解构就可以看出 他会根据不同的数据解构出不同的变量

    //     }),shallowEqual)
    //     // ：1：也就是说 redux 通过useDispatch这个hook 把 事件触发的方法暴露出来 
    //     // 让使用者去调用 去传入一些异步操作
    //     const dispatch = useDispatch();
    //     // 这里就是发送请求
    //     useEffect(() => {
    //         dispatch(getTopBannerAction());
    //     }, [dispatch])

    return (
        <RecommendWrapper>
            <YTopBanner></YTopBanner>
            <Content className="wrap-v2">
                <RecommendLeft>
                    <YHotRecommend></YHotRecommend>
                    <YNewAlbum></YNewAlbum>
                    <YRecomendRanking></YRecomendRanking>
                </RecommendLeft>
                <RecommendRight>
                    <YUserLogin/>
                    <YSettleSinger/>
                    <YHotAnchor/>
                </RecommendRight>
            </Content>
        </RecommendWrapper>
    )
}

//这里 是可以优化的 可以用 Hook  



// connect(mapStateToProps,mapDispatchToProps） 这个方法返回的是高阶组件参数是个组件
// 然后 把 memo(YRecommend) 当成组件 传给connect
export default memo(YRecommend) ;


// 最初的写法 不用hook的写法

// export default memo(function YRecommend() {
// function YRecommend(props) {
//     //  这里的props里的数据 包括了redux的store里的数据 数据在App 组件里进行了 共享
//     //  这个props里就会有store里的 topBanners 的数据
//     const { getBanners,topBanners } = props;
//     useEffect(() => {
//         getBanners()
//     }, [getBanners])

//     return (
//         <div>
//             YRecommend:{topBanners.length}
//         </div>
//     )
// }

// //这里 是可以优化的 可以用 Hook  


// const mapStateToProps = state => ({
//     topBanners:state.recommend.topBanners
// })
// const mapDispatchToProps = dispatch =>({
//     //  这里把getBanners传到了redux里的 store里了
//     getBanners: ()=>{
//         dispatch(getTopBannerAction());
//     }
// })
// // connect(mapStateToProps,mapDispatchToProps） 这个方法返回的是高阶组件参数是个组件
// // 然后 把 memo(YRecommend) 当成组件 传给connect
// export default connect(mapStateToProps,mapDispatchToProps)(memo(YRecommend));